<!doctype html>
<html>
    <head>
        <title>Sausage.js example</title>
        <script type="text/javascript" src="../Sausage-profile.js"></script>
        <script type="text/javascript" src="http://yandex.st/jquery/1.5.1/jquery.js"></script>
    </head>
    <body>
<h1>Sausage.js - Context Switch</h1>
<pre>
var context = {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /.*/};
$$(context)
('foo')
('bar', -1)
('zoo')
(); // undefined
</pre>


<h1>Sausage.js - Fixed Context</h1>
<pre>
var context = {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /.*/};
 $$(context, {fixedContext: true})
('foo')
('bar', -1)
('zoo')
(); // /.*/
</pre>

<h1>Sausage.js - Function call</h1>
<pre>
var context = {'foo': 1};
$(context)
('foo', 1000)
(function (context) {
    return '' + context.foo / 2;
})
('length')
(function (context) {
    return typeof context;
})
(); // number
</pre>

<h1>Sausage.js - DOM Chain Wrapper</h1>
<pre>
$$(document)
('getElementById', 'div1')
('style')
    ('width', '100px')
    ({
        height: '100px',
        color: 'red',
        border: 'solid 1px blue'
    })
(); // CSSStyleDeclaration Object
</pre>
<div id="div1">Test</div>

<h1>Sausage.js - jQuery Chain Wrapper</h1>
<pre>
$$(jQuery)
(['#div2'])
('css', {width: '100px', height:'100px', color: 'red', border: 'solid 1px blue'})
('animate', {width: '200px', height:'200px'})
();
</pre>
<div id="div2">Test</div>

<h1>Sausage.js - Canvas Chain Wrapper</h1>
<pre>
var canvasContext = $$(document)('querySelectorAll', 'canvas')(0)('getContext', '2d')();
$$(canvasContext, {fixedContext: true})
('fillStyle', '#eee')
('strokeStyle', 'blue')
('beginPath')
('moveTo', 10, 10)
('lineTo', 100, 10)
('lineTo', 100, 100)
('lineTo', 10, 100)
('lineTo', 10, 10)
('closePath')
('stroke')
('fill')
();
</pre>
    <canvas></canvas>
    <script type="text/javascript">
var context, result, canvasContext;

$$.profile();
// Пример 1. Переключание контекста
context = {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /./};
// Создаем Сосиску с контекстом {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /./}
result = $$(context)
('foo')     // Переключаем контекст сосиски на {'bar': '100500'}
('bar', -1) // Меняем значение и Переключаем контекст на значение
('zoo')     // Переключаем контекст на zoo
();          // Получаем значение контекста - undefined т.к. у объекта -1 нет метода zoo


// Пример 2. Фиксированный контекст
context = {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /./};
// Создаем Сосиску с контекстом {'foo': {'bar': '100500'}, 'bar': '888', 'zoo': /./}
result = $$(context, {fixedContext: true})
('foo')     // Переключаем контекст сосиски на {'bar': '100500'}
('bar', -1) // Меняем значение
('zoo')     // Переключаем контекст на zoo
();          // Получаем значение контекста - /./




// Пример 3. Вызов функций - изменение значения контекста
context = {'foo': 1};
// Создаем Сосиску с контекстом {'foo': 1}
result = $$(context)
('foo', 1000) // Меняем значение переменной контекста
(function (context) { // Передаем функцию для обработки контекста
    return '' + context.foo / 2; // Возвращаем текущий контекст - строка '500'
})
('length') // Переключаем контекст на длину строки
(function (context) {
    return typeof context; // Возвращаем текущий контекст - строка 'number'
})
(); // Получаем значение контекста number



// Пример 4. Обертка DOM
result = $$(document)
('getElementById', 'div1')
('style')
    ('width', '100px') // Меняем свойство
    ({  // Передаем объект для редактирования свойств/ вызовов методов пачкой
        height: '100px',
        color: 'red',
        border: 'solid 1px blue'
    })
(); // CSSStyleDeclaration Object



// Пример 5. Обертка jQuery
result = $$(jQuery)
(['#div2']) // Если первый аргумент массив и контекст - функция, то контекст вызывается с параметрами в массиве
('css', {width: '100px', height:'100px', color: 'red', border: 'solid 1px blue'})
('animate', {width: '200px', height:'200px'})
(); // jQuery



// Пример 6. Работа с canvas
canvasContext = ('v'=='\v') || $$(document)('querySelectorAll', 'canvas')(0)('getContext', '2d')();
result = ('v'=='\v') || $$(canvasContext, {fixedContext: true})
('fillStyle', '#eee')
('strokeStyle', 'blue')
('beginPath')
('moveTo', 10, 10)
('lineTo', 100, 10)
('lineTo', 100, 100)
('lineTo', 10, 100)
('lineTo', 10, 10)
('closePath')
('stroke')
('fill')
();
console && console.dir($$.profileEnd());
    </script>
    </body>
</html>